<!--
 * @Author: byron
 * @Date: 2022-01-21 15:46:24
 * @LastEditTime: 2022-05-09 18:41:06
-->
<template>
    <div class="right-main-warp module-inner" v-show="visible">
        <div class="icon-warp">
            <Icon type="" @iconHandle="iconHandle"></Icon>
        </div>
        <div class="module-container">
            <div class="title-warp">
                <i
                    class="iconfont icon-gongnengdingyi"
                    style="
                        color: #ff9ff3;
                        display: inline-block;
                        vertical-align: center;
                        margin-right: 8px;
                        font-size: 20px;
                    "
                ></i>
                <span style="vertical-align: center; font-size: 18px"
                    >其它模块</span
                >
            </div>
            <div class="module" @click="toPage">
                <div class="module-item" id="1">
                    <i class="iconfont icon-child" style="color: #2d8cf0"></i>
                    <span>友链</span>
                </div>

                <div class="module-item" id="2">
                    <!-- <a href="https://resume.huos77.com/" target="_blank"> -->
                    <i class="iconfont icon-smile" style="color: #42b983"></i>
                    <span>个人介绍</span>
                    <!-- </a> -->
                </div>

                <div class="module-item" id="3">
                    <i
                        class="iconfont icon-comment1"
                        style="color: #673bb7"
                    ></i>
                    <span>留言板</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    computed: {
        visible() {
            return this.$store.getters.otherApp
        },
    },
    methods: {
        iconHandle() {
            this.$store.commit('app/TOGGLE_OTHERAPP')
        },
        toPage(e) {
            switch (e.target.id - 0) {
                case 1:
                    this.$message({
                        type: 'info',
                        message: '尚未开发，敬请期待',
                    })
                    break
                case 2:
                    this.$message({
                        type: 'info',
                        message: '正在跳转页面',
                    })
                    setTimeout(() => {
                        window.location.href = 'https://resume.huos77.cn/'
                    }, 500)
                    break
                case 3:
                    this.$message({
                        type: 'info',
                        message: '尚未开发，敬请期待',
                    })
                    break
            }
        },
    },
}
</script>
<style lang="less" scoped>
@keyframes other-card-fade {
    from {
        transform: translateY(10px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.right-main-warp {
    &.module-inner {
        opacity: 0;
        animation: other-card-fade 0.6s ease-out 0.4s 1 forwards;
    }
    .icon-warp {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .module-container {
        padding: 20px;
        h2 {
            margin: 0;
            text-align: left;
            font-size: 20px;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 1px solid #e5e8ed;
        }
        .module {
            display: flex;
            flex-wrap: wrap;
            margin-top: 26px;
            align-content: space-between;
            justify-content: space-between;
            padding: 0 10px;

            .module-item {
                border-radius: 4px;
                text-align: start;
                cursor: pointer;
                width: 48%;
                vertical-align: middle;
                padding: 10px;
                margin-bottom: 10px;
                align-content: center;
                transition: all 0.6s;
                i {
                    font-size: 20px;
                    color: #01aaed;
                    margin-right: 4px;
                    vertical-align: bottom;
                    pointer-events: none;
                }
                span {
                    pointer-events: none;
                }
            }
            .module-item:hover {
                background-color: #e5e5e5;
            }
        }
    }
}
</style>
